<template>
	<view class="album">
		<u--form class="formSty" labelPosition="left" :model="form" :rules="rules" ref="form" labelWidth="120rpx">
			<view class="formSty-item other">
				<view class="tips">举报理由 *</view>
				<u-checkbox-group v-model="checkboxValue" placement="column" @change="checkboxChange" activeColor="#FF5900">
					<u-checkbox
						:customStyle="{ marginBottom: '8px' }"
						v-for="(item, index) in checkboxList"
						:key="index"
						labelColor="#1A1A1A"
						:label="item.name"
						:name="item.name"
					></u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="formSty-item">
				<u-form-item prop="trueName" style="position:relative">
					<textarea class="textareaSty" border="none" v-model="form.reportContent" placeholder="填写你要举报的内容..."></textarea>
					<view class="fontNum">{{ form.reportContent.length }} / 200</view>
				</u-form-item>
			</view>
			<view class="formSty-item other">
				<view class="tips">上传凭证</view>
				<!-- <BaseUpload :imgList="form.img" :limit="9" @success="e => (form.img = [...form.img, ...e])" @delimg="e => form.img.splice(e, 1)"></BaseUpload> -->

				<BaseUpload :fileList="list" :media="mediaType" @media="e => (mediaType = e)" @success="uploadFile" @del="delFile" :height="210" :width="210"></BaseUpload>
			</view>
		</u--form>
		<BaseAction :show="show" :list="listActions" title="操作手册" @close="show = false" @submit="chooseItem"></BaseAction>
	</view>
</template>

<script>
import BaseUpload from '@/components/BaseUpload/BaseUpload.vue';
import BaseAction from './components/BaseAction/BaseAction.vue';
import { contentReport } from '@/api/public/public.js';
export default {
	components: {
		BaseUpload,
		BaseAction
	},
	data: () => ({
		list: [],
		mediaType: null,
		album: null,
		show: false,
		checkboxValue: [],
		// 基本案列数据
		checkboxList: [
			{
				name: '垃圾广告、虚假诈骗信息'
			},
			{
				name: '黄赌毒暴力信息'
			},
			{
				name: '政治敏感信息'
			},
			{
				name: '蓄意骚扰'
			},
			{
				name: '其他'
			}
		],
		listActions: [
			{
				id: 1,
				name: '选项一'
			},
			{
				id: 2,
				name: '选项二'
			},
			{
				id: 3,
				name: '纪念日'
			},
			{
				id: 4,
				name: '选项4'
			},
			{
				id: 5,
				name: '选项5'
			},
			{
				id: 6,
				name: '纪念6'
			},
			{
				id: 7,
				name: '选项7'
			},
			{
				id: 8,
				name: '选项8'
			},
			{
				id: 9,
				name: '纪念9'
			},
			{
				id: 10,
				name: '选项10'
			},
			{
				id: 11,
				name: '选项11'
			},
			{
				id: 12,
				name: '纪念12'
			}
		],
		form: {
			reportContent: '', //举报内容
			reportReason: ''
		},
		rules: {}
	}),
	onLoad(options) {
		this.form.reportId = options.reportId;
		this.form.reportType = options.reportType;
		console.log(123, options);
	},
	onNavigationBarButtonTap(e) {
		console.log(e);
		this.submit();
	},
	methods: {
		chooseItem(e) {
			this.album = e;
		},
		checkboxChange(n) {
			console.log('change', n); // 勾选后的信息
			this.checkboxValue = n;
			console.log(120, this.checkboxValue);
		},
		// 上传图片
		uploadFile(e) {
			this.list = [...this.list, ...e];
			this.form.mediaType = this.mediaType;
			if (this.mediaType == 2) {
				this.form.videoCover = this.list[0] + '?x-oss-process=video/snapshot,t_0,f_jpg';
			}
			if (this.list && this.list.length > 0) {
				this.form.reportImgs = this.list.join(',');
			}
			console.log('this.form.videoCover', this.form.videoCover);
		},
		// 删除图片
		delFile(e) {
			this.list.splice(e, 1);
		},
		submit() {
			this.form.reportReason = this.checkboxValue.join(',');
			console.log(this.form); // /sys/content/report
			if (this.checkboxValue.length <= 0) {
				uni.$u.toast('请勾选举报理由');
				return;
			}
			if (this.form.reportContent.length <= 0) {
				uni.$u.toast('请填写举报的内容');
				return;
			}
			if (this.list.length <= 0) {
				uni.$u.toast('请上传凭证');
				return;
			}
			this.form.reportReason = this.checkboxValue.join(',');
			console.log(this.form); // /sys/content/report
			contentReport(this.form).then(res => {
				if(res){
					uni.$u.toast('举报成功');
					setTimeout(()=>{
					this.back();
					},1500)

				}
			}).catch(error=>{
				uni.$u.toast('举报失败');
				setTimeout(()=>{
				this.back();
				},1500)
				console.log(178,error)
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f5f5f5;
}
.f12 {
	margin-left: 16rpx;
	font-size: 24rpx;
}

.textareaSty {
	width: 100%;
}
.other {
	padding: 19rpx 32rpx !important;
}
.fontNum {
	position: absolute;
	right: 0rpx;
	bottom: 24rpx;
}
.album {
	.formSty {
		&-item {
			margin-top: 20rpx;
			background-color: #ffffff;
			padding: 0 32rpx;
			.right {
				display: flex;
			}
			.tips {
				margin-top: 21rpx;
				margin-bottom: 40rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #1a1a1a;
				line-height: 32rpx;
				color: #1a1a1a;
			}
		}
		.cell {
			display: flex;
			justify-content: space-between;
			padding: 40rpx 32rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1a1a1a;
			line-height: 32rpx;
		}
	}
}

::v-deep .uni-textarea-placeholder {
	font-size: 32rpx !important;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400 !important;
	color: #999999 !important;
	line-height: 32rpx !important;
}
</style>
